<template>
	<div class="refund">
		<el-menu active-text-color='#409EFF' :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
			@select="handleSelect">
			<el-menu-item index="1">全部申请(1000)</el-menu-item>
			<el-menu-item index="2">待处理(100)</el-menu-item>
			<el-menu-item index="3">已处理(100)</el-menu-item>
			<el-menu-item index="4">已拒绝(100)</el-menu-item>
		</el-menu>
		<el-form label-width="80px" :model="search" :inline="true" style="margin:30px 0 20px 0;">
			<el-form-item label="输入搜索">
				<el-input v-model="search.Refundorders"></el-input>
			</el-form-item>
			<el-form-item label="申请时间">
				<el-input v-model="search.Orderstime"></el-input>
			</el-form-item>
			<el-form-item label="处理状态">
				<el-select v-model="search.Refundstatus" placeholder="处理状态">
					<el-option label="待处理" value="search.Refundstatus[1]"></el-option>
					<el-option label="已处理" value="search.Refundstatus[2]"></el-option>
					<el-option label="已拒绝" value="search.Refundstatus[3]"></el-option>
				</el-select>
			</el-form-item>
		
		</el-form>
		<el-table ref="multipleTable" :data="ftableData" tooltip-effect="dark" style="width: 100%"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column prop="Refundorders" label="退款单号" width="120">
			</el-table-column>
			<el-table-column prop="Orderstime" label="申请时间" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="Useraccount" label="用户账号" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="Refundamount" label="退款金额" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="申请状态">
				<template slot-scope="scope">
					<span v-if="scope.row.Refundstatus=='Processed'">待处理1</span>
					<span v-else-if="scope.row.Refundstatus=='Processeds'">待处理</span>
					<span v-else-if="scope.row.Refundstatus=='Havedealwith'" style="color:lawngreen">已处理</span>
					<span v-else-if="scope.row.Refundstatus=='Refused'" style="color:red">已拒绝</span>
					<span v-else style="color:red">已拒绝</span>
				</template>
			</el-table-column>
			<el-table-column prop="Processingtime" label="处理时间" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<i class="el-icon-search" style="color: #1E90FF;"></i>
					<span style="color: #1E90FF;">查看订单</span>	
				</template>
			</el-table-column>
		</el-table>
		<template>
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage4" :page-sizes="[100, 200, 300, 400,500,600,700,800,900,1000]" :page-size="100"
					layout="total, sizes, prev, pager, next, jumper" :total="1000">
				</el-pagination>
			</div>
		</template>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: '1',
				activeIndex2: '1',
				orderList: [],
				pagination: "",
				search: {
					Id: '',
					Refundorders: '',
					Orderstime: '',
					Useraccount: '',
					Refundamount:"",
					Refundstatus:["Processed","Havedealwith","Refused","Processeds"],
					Processingtime:"",
				},
				currentPage4:10

			};
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			getList2() {
				// 根据参数不一样去回来的数据不一样
				this.$http.get("/web/orders/?page=3&Refundstatus=all&")
					.then(res => {
						this.orderList = res.data.list2;
						// this.pagination = res.data.pagination;
						console.log(this.pagination)
						console.log(this.orderList)
					})
					.catch(err => {
						console.log(err)
					})
			},
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
			}
		},
		created() {
			this.getList2()
		},
		computed:{
			ftableData: function() {
				// var that=this;
				var temp = this.orderList.filter(row => {
					var flag = true;
					for (var k in this.search) {
						//搜索条件遍历
						// console.log(row[k])
						if (this.search[k] != "" && !String(row[k]).includes(this.search[k])) {
							flag = false;
						}
					}
					return flag;
				})
				return temp;
			},
		}
	}
</script>

<style>
	.refund .el-table th>.cell {
		text-align: center;
	}

	.el-table .cell {
		text-align: center;
	}
</style>
